<template>
  <!-- 分页 -->
  <el-pagination v-model:current-page='_currentPage' v-model:page-size='_pageSize' :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" class="paging" ref="pagins" />
  <el-backtop target='.main' :right="100" :bottom="100" :visibility-height='50' ref="backTop"></el-backtop>
</template>

<script>
export default {
  data() {
    return {
      _currentPage: this.currentPage,
      _pageSize: this.pageSize
    }
  },
  props: {
    total: Number,
    currentPage: Number,
    pageSize: Number
  },
  emits: ['pageChang'],
  methods: {
    handleCurrentChange() {
      this.$emit('pageChang', { currentPage: this._currentPage, pageSize: this._pageSize })
      this.$nextTick(() => {
        this.$refs.backTop.$el.click?.()   //ES 2020新特性
      })
    }
  },
  watch: {
    _pageSize() {
      // let pagerCount = this.$refs.pagins.pagerCount  //获取总页数
      // if (this.currentPage > pagerCount) return;  //防止刷新空数据

      this.handleCurrentChange()
    }
  }
}
</script>

<style lang="less" scoped>
.paging {
  margin-top: 10px;
}
</style>